<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/mui.min.css" rel="stylesheet" />
    <link href="../css/style.css" rel="stylesheet" />
    <style type="text/css" media="all">
    </style>
  </head>

  <body>
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">应用</h1>
    </header>
    <div class="mui-content">
      <div class="mui-slider">
        <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
          <a class="mui-control-item" href="#item1">news</a>
          <a class="mui-control-item" href="#item2">erp</a>
          <a class="mui-control-item" href="#item3">tools</a>
        </div>
        <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
        <div class="mui-slider-group">
          <div id="item1" class="mui-slider-item mui-control-content mui-active">
            <ul class="mui-table-view">
              <li v-repeat="item:list| filterBy 'erp' in tags" class="mui-table-view-cell" v-cloak>
                <partial name="item"></partial>
              </li>
            </ul>
          </div>
          <div id="item2" class="mui-slider-item mui-control-content">
            <ul class="mui-table-view">
              <li v-repeat="item:list| filterBy 'erp' in tags" class="mui-table-view-cell" v-cloak>
                <partial name="item"></partial>
              </li>
            </ul>
          </div>
          <div id="item3" class="mui-slider-item mui-control-content">
            <ul class="mui-table-view">
              <li v-repeat="item:list
										| filterBy 'tool' in tags" class="mui-table-view-cell" v-cloak>
                <partial name="item"></partial>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <script type="text/x-template" id="item-template">
      <img class="mui-media-object mui-pull-left" v-attr="src:item.img||'../images/apps/default.png'" />
      <h4>{{item.name}}</h4>
      <p class="mui-ellipsis-2">
        {{item.description|| 'item description'}} {{item.version}}
      </p>
      <div class="mui-button-row mui-pull-right">
        <button v-show="!isInstalled(item)" v-on="tap:installApp(item,true)" type="button" class="mui-btn">
          install
        </button>
        <button v-show="isInstalled(item)" v-on="tap:installApp(item)" class="mui-btn mui-btn-primary">
          update
        </button>
      </div>
    </script>
    <script src="../js/mui.min.js"></script>
    <script src="../app/app.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../app/vue-html5.js"></script>
    <script src="../js/lodash.min.js"></script>
    <script type="text/javascript" charset="utf-8">
      (function($, window, document, Vue, vm) {
        window.vm = vm = new Vue.PageVm({
          el: '.mui-content',
          name: 'page app_list',
          model: 'Apps',
          partials: {
            item: '#item-template',
          },
          data: function() {
            var localApps = localStorageJson('apps', {});
            return {
              installed: Object.keys(localApps),
            };
          },
          created: function() {
            this.loadList();
          },
          methods: {
            isInstalled: function(app) {
              return this.installed.indexOf(app.name) != -1;
            },
            installApp: function(app, init) {
              $.installApp(app.name, app.url, init);
            },
          },
          mixins: [Vue.mixins.ajax, Vue.mixins.list]
        });
      })(mui, window, document, Vue, window.vm = {});
    </script>
  </body>

</html>